<template>
  <!-- collapse-tags -->
  <el-cascader
    v-select-scroll
    ref="cascaderSelect"
    v-model="valueClone"
    v-bind="$attrs"
    :show-all-levels="false"
    :props="{
      emitPath:false,
      value: 'id',
      label: 'name',
      checkStrictly: true,
      multiple: true,
    }"
    :collapse-tags="collapseTags"
    filterable
    size="small"
    class="multiply-select-scroll"
    clearable
    @change="onChange"
  >
    <template slot-scope="{ data }">
      <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
        <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
        <span class="inline-tag ellipsisOne">{{ data.name }}</span>
      </el-tooltip>
      <span v-else>{{ data.name }}</span>
    </template>
  </el-cascader>
</template>

<script>
export default {
  name: 'FilterCascader',
  model: {
    prop: 'value',
    event: 'selectChange'
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    collapseTags: {
      type: Boolean,
      default: false
    },
    filterShowFullName: { // 搜索结果显示全路径
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checkedNodeClone: [],
      valueClone: []
    };
  },
  // computed: {
  //   valueClone: {
  //     get() {
  //       return this.value;
  //     },
  //     set(val) {
  //       // this.$emit('selectChange', val);
  //     }
  //   }
  // },
  watch: {
    value: {
      handler(data) {
        this.valueClone = data;
        this.checkedNodeClone = data;
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$watch(() => this.$refs['cascaderSelect'].filtering,
      val => {
        this.filterShowFullName && val && this.setTitle();
      }
    );
  },
  methods: {
    setTitle() {
      const suggestions = this.$refs.cascaderSelect.suggestions;
      const filterListDom = document.querySelectorAll('.el-cascader__suggestion-item');
      if (!filterListDom || !suggestions) return;
      filterListDom.forEach((item, index) => {
        item.title = suggestions[index].pathLabels.join('/');
      });
    },
    // 获取两数组差值
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    onChange(data, fromParentData = null) {
      this.$emit('selectChange', data);
      let curCheckedNode;
      if (fromParentData && fromParentData.check) {
        curCheckedNode = fromParentData;
      } else {
        const curCheckedNodes = this.$refs['cascaderSelect'].getCheckedNodes();
        const diffId = this.getArrDifference(this.valueClone, this.checkedNodeClone)[0];
        curCheckedNode = curCheckedNodes.filter(item => item.data.id === diffId)[0];
      }
      if (!curCheckedNode) return;
      if (curCheckedNode.hasChildren) {
        curCheckedNode.children.forEach(subItem => {
          this.matchCheckedNode(subItem, true, true);
        });
      }
      curCheckedNode.parent && this.matchCheckedNode(curCheckedNode.parent, false);
    },
    // 递归取消同一路径下的其他父、子节点的选中状态
    matchCheckedNode(nodeData, matchChildren = true, fromParent = false) { // 匹配的是子节点还是父节点，默认子节点
      const curId = fromParent ? nodeData.id : nodeData.data.id;
      const includeIndex = this.valueClone.indexOf(curId);
      const selectDeptList = _.cloneDeep(this.valueClone);
      if (includeIndex !== -1) {
        selectDeptList.splice(includeIndex, 1);
        this.checkedNodeClone = selectDeptList;
        this.valueClone = selectDeptList;
        this.$emit('selectChange', selectDeptList);
        return;
      }
      this.checkedNodeClone = selectDeptList;
      this.$emit('selectChange', selectDeptList);
      if (matchChildren && nodeData.hasChildren) {
        nodeData.children.forEach(item => {
          this.matchCheckedNode(item, true);
        });
      }
      if (!matchChildren && nodeData.parent) {
        this.matchCheckedNode(nodeData.parent, false);
      }
    }
  }
};
</script>

<style scoped lang="scss">

</style>
